<!-- 考勤统计			attendance -->
<template>
	<view class="warps">
		<view class="punch-top">
			<view class="w90 f b c p_t_31">
				<view>
					<text class="bold">4月汇总</text>
				</view>
				<view>
					<image style="width:30rpx;height: 32rpx;" src="../../static/img/028.png" mode=""></image>
				</view>
			</view>
			<view class="w80 f b c mar p_t_10">
				<view class="f d senter">
					<text class="bold">统计数</text>
					<text class="p_t_20">统计项目</text>
				</view>
				<view class="f d senter">
					<text class="bold">统计数</text>
					<text class="p_t_20">统计项目</text>
				</view>
				<view class="f d senter">
					<text class="bold">统计数</text>
					<text class="p_t_20">统计项目</text>
				</view>
			</view>
		</view>
		<view class="punch-daka">
			<view class="content">
				<ren-calendar ref='ren' :markDays='markDays' :headerBar='true' @onDayClick='onDayClick'></ren-calendar>
				<!-- <view class="change">选中日期：{{curDate}}</view> -->
			</view>
			<view class="w90 p_t_20">
				<view>
					<text class="hui">共两次打卡，工时10小时</text>
				</view>
				<view class="vw40 f">
					<view class="f d p_t_40">
						<text>14:32</text>
						<text class="p_t_70">14:32</text>
					</view>
					<view class="" style="margin-left:40rpx;">
						<u-steps :list="numList" :current="0" direction="column"></u-steps>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {

				curDate: '',
				markDays: [],
				numList: [{
					name: '上班打卡08: 52'
				}, {
					name: '下班打卡20: 03'
				}, ]
			}
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			this.markDays.push(today);
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '考勤打卡'
			})
		},
		methods: {
			onDayClick(data) {
				this.curDate = data.date;
			}
		}
	}
</script>

<style scoped>
	.content {
		padding-top: 50rpx;
	}

	.change {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 100rpx;
		height: 100rpx;
		color: #b89249;
		background-color: #21191b;
	}

	.warps {
		/* height: 200vh; */
		overflow: hidden;
		background-color: #F6F8FC;
	}

	.col {
		color: #1F73F2;
		background-color: #F1F6FF;
	}

	.bol {
		background: #ececec;
	}

	.punch-top {
		width: 686rpx;
		height: 214rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.punch-daka {
		width: 686rpx;
		height:1214rpx;
		opacity: 1;
		background: #ffffff;
		border-radius: 8rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.16);
		margin: 0 auto;
		margin-top: 24rpx;
	}

	.punch-daka-s {
		width: 300rpx;
		height: 58rpx;
		opacity: 1;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.punch-daka-lan {
		width: 188rpx;
		height: 188rpx;
		opacity: 1;
		background: #1f73f2;
		border-radius: 50%;
		margin: 0 auto;
		margin-top: 120rpx;
	}
</style>
